<template>
	<view class="contentBox">
		<image :src="longImgUrl" mode="widthFix"></image>
	</view>
</template>

<script>
	import {
		baseURL, download
	} from "@/utils/util.js";
	import {
		querySolution,
	} from "@/apis/product.js"
	export default {
		data() {
			return {
				content: "",
				longImgUrl: '',
				image: {},
				pageId: '',
			};
		},

		onLoad: function(option) {
			uni.setNavigationBarTitle({
				title: option.title
			})
			if (option.id) { // 搜索过来的通过场景id搜出来图片地址
				this.pageId = option.id
				this.getPageInfo()
			} else {
				this.longImgUrl = download(uni.getStorageSync('longImgUrl'))
				this.handleSetImageStyle()
			}
		},
		methods: {
			getPageInfo() {
				querySolution({
					id: this.pageId,
				}).then(res => {
					if (res.code == '00000000') {
						this.longImgUrl = download(res.data.posterId[0])
						this.handleSetImageStyle()
					}
				})
			},
			//js 简写
			async handleSetImageStyle() {
				// 由于方法是异步的，渲染时高度会不生效，所以要加await
				let imageInfoObj = await uni.getImageInfo({
					src: this.longImgUrl
				})

				// 取到图片的宽高
				let {
					width,
					height
				} = imageInfoObj[1]

				//配合image的mode使用只需要设置宽度
				this.$set(this.image, 'width', width)

			}
		}
	}
</script>
<style lang="scss" scoped>
	.contentBox {
		font-size: 24rpx;

		image {
			width: 100vw; // 设置最大宽度不能超过屏幕
		}
	}
</style>


<style>
</style>